<template>
    <div v-show="showHeader" :style="opacityStyle">
      <div class="CityHeader">景点详情</div>
      <router-link tag="div" to="/"><div class="iconfont" style="font-size: .4rem">&#xe624;</div></router-link>
    </div>
</template>

<script>
    export default {
        name: "DetailHeader",
        data (){
          return {
            showHeader:false,
            opacityStyle:{
              opacity:0
            }
          }
        },
      methods:{
        changeScrollTop (){
          let top = document.documentElement.scrollTop
          if(top>=60){
            let opacity = top/140
            opacity = opacity >1 ? 1:opacity
            this.opacityStyle.opacity = opacity
            this.showHeader = true

          }
          else {
            this.showHeader = false
          }
        }
      },
      mounted (){
          // 绑定的是全局事件，会有bug，的及时释放掉
          window.addEventListener('scroll',this.changeScrollTop)
      },
      unmounted () {
        window.removeEventListener('scroll',this.changeScrollTop)
      }
    }
</script>

<style scoped lang="stylus">
  @import "~css/varibles.styl";
  .CityHeader{ width: 100%;height: .86rem;line-height: .86rem;font-size: .32rem;color: #fff;text-align: center;
    background: #00bcd4;position: fixed;top:0;left:0;right: 0;z-index:2}
  .iconfont{ width: .8rem;color: #fff;position: fixed;left:0;top:0;line-height: .86rem;text-align: center;cursor: pointer}
</style>
